<template>
	<scroll-view @scrolltolower="handleScroll" class="recommend_view" scroll-y v-if="recommends.length>0">
		
		<!-- 推荐 -->
		<view class="recommend_wrap">
			<navigator
			:url=" `/pages/album/index?id=5e0ea895e7bce739990ba8a1` "
			class="recommend_item"
			v-for="item in recommends"
			:key="item.id"
			>
				<image mode="widthFix" :src="item.thumb"></image>
			</navigator>
		</view>
		
		<!-- 月份 -->
		<view class="monthes_wrap">
			<!-- 顶部区域 -->
			<view class="monthes_title">
				<view class="title_info">
					<view class="info">
						<text>{{monthes.DD}} /</text>
						{{monthes.MM}} 月
					</view>
					<view class="text"> {{monthes.title}}	</view>
				</view>
				<view class="title_more">更多&gt;</view>
			</view>
			
			<!-- 内容区 -->
			<view class="monthes_content">
				<view class="content_item"
				v-for="(i,index) in monthes.items"
				:key="i.id"
				>
					<goDetail :list="monthes.items" :index="index">
						<image mode="aspectFill" :src="i.thumb+i.rule.replace('$<Height>',360)"></image>
					</goDetail>
				</view>
			</view>
		</view>
		
		<!-- 热门 -->
		<view class="hot_wrap">
			<view class="hots_title">
				<text>热门</text>
			</view>
			
			<view class="hots_content">
				<view class="hots_item"
				v-for="(item,index) in hots"
				:key="item.id"
				>
					<goDetail :list="hots" :index="index">
						<image :src="item.thumb" mode="widthFix"></image>
					</goDetail>
				</view>
			</view>
		</view>
		
	</scroll-view>
</template>

<script>
	import moment from "../../../utils/moment.min.js"
	import goDetail from "../../../components/goDetail/goDetail.nvue"
	
	export default {
		data(){
			return {
				// 推荐列表
				recommends:[],
				//月份
				monthes:{},
				//热门
				hots:[],
				//分页索引
				index:1,
				skip:0
			}
		},
		mounted() {
			this.getAllList()
		},
		methods:{
			// 获取所有数据
			async getAllList(){
				let { homepage , vertical } = await this.$request({
					url: "/image/v3/homepage/vertical",
					data: {
						limit: 15,
						order: "hot",
						skip: 0
					}
				})
				this.recommends = homepage[1].items
				this.monthes = homepage[2]
				this.monthes.MM = moment(this.monthes.stime).format("MM")
				this.monthes.DD = moment(this.monthes.stime).format("DD")
				this.hots = vertical
			},
			// 滚动条
			async handleScroll(){
				this.index = this.index + 1
				this.skip = this.index * 15
				let { vertical } = await this.$request({
					url:"/image/v3/homepage/vertical",
					data:{
						limit:15,
						order:"hot",
						skip:this.skip
					}
				})
				if(vertical.length == 0){
					uni.showToast({
						title:"无更多内容",
						icon:"none"
					})
					return;
				}
				// this.hots.push(...vertical)
				this.hots = [...this.hots,...vertical]
			}
		},
		components:{
			goDetail
		}
	}
	
</script>

<style lang="scss" scoped>
.recommend_view{
	height: calc(100vh - 36px);
}

	
.recommend_wrap{
	display: flex;
	flex-wrap: wrap;
	font-size: 0;
	.recommend_item{
		width: 50%;
		border: 3rpx solid #fff;
	}
}


.monthes_wrap{
	.monthes_title{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		.title_info{
			display: flex;
			color: $color;
			font-weight: 600;
			.info{
				text{
					font-size: 34rpx;
				}
			}
			.text{
				font-size: 34rpx;
				color: #666;
				margin-left: 30rpx;
			}
		}
		.title_more{
			font-size: 32rpx;
			color: $color;
			font-weight: 600;
		}
	}
	
	.monthes_content{
		display: flex;
		flex-wrap: wrap;
		.content_item{
			width: 33.33%;
			border: 1rpx solid #fff;
		}
	}
}


.hot_wrap{
	.hots_title{
		padding: 20rpx;
		text{
			border-left: 20rpx solid $color;
			font-size: 34rpx;
			font-weight: 600;
			padding-left: 20rpx;
		}
	}
	
	.hots_content{
		display: flex;
		flex-wrap: wrap;
		font-size: 0;
		.hots_item{
			width: 33.33%;
			border: 5rpx solid #fff;
		}
	}
}
</style>
